<script setup lang="ts">
import { computed, ref } from 'vue';

const props: any = defineProps<{
    ujt: any;
    menus: any;
}>();

const { $fn, $global } = props.ujt;

// 定义菜单是否打开的响应式变量
const isMenuOpen = ref<boolean>(false);

// 切换菜单显示状态的函数
function toggleMenu() {
    isMenuOpen.value = !isMenuOpen.value;
}

const cmMenus = computed(() => {
    return [
        { value: '/', label: $fn.lg('asai.home'), type: 'module' },
        {
            fn: () => $fn.changetheme('auto'),
            label: $fn.lg('asai.theme'),
            type: 'module',
        },
        {
            fn: () => $fn.changelang('auto'),
            label: $fn.lg('asai.langs.default'),
            type: 'module',
        },
        ...(props.menus || []),
    ];
});
</script>

<template>
    <teleport to="#popteleport" v-if="!$global.sys || $global.sys.devlevel > 1">
        <div class="as-floating-menu">
            <button class="as-floating-button" @pointerdown="toggleMenu">
                <span v-if="isMenuOpen">×</span>
                <span v-else>☰</span>
            </button>
            <ul class="as-floating-menus" :class="{ open: isMenuOpen }">
                <li
                    v-for="(item, index) in cmMenus"
                    :key="'menu' + index"
                    :class="`${item.type === 'module' ? 'module ' : ''}${
                        item.value && $global.location.hash.includes(item.value)
                            ? 'active'
                            : ''
                    }`"
                    @pointerup="
                        item.value ? $fn.sethash(item.value) : item?.fn?.()
                    "
                >
                    {{ item.label || item.value }}
                </li>
            </ul>
        </div>
    </teleport>
</template>

<style scoped lang="scss">
.as-floating-menu {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

.as-floating-button {
    background-color: var(--ch8);
    color: var(--ch0);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.as-floating-button:hover {
    background-color: var(--cm8);
    color: var(--cm0);
}

.as-floating-menus {
    background-color: var(--ch8);
    color: var(--ch0);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    min-width: 200px;
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 120px);
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 50px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    overflow-y: auto;
}

.as-floating-menus.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.as-floating-menus li {
    color: var(--cm0);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
    cursor: pointer;
}
.as-floating-menus li.module {
    background-color: var(--ch6);
    color: var(--ch0);
}
.as-floating-menus li.active,
.as-floating-menus li:hover {
    background-color: var(--cm8);
    color: var(--cm0);
}
.as-floating-menus li.active {
    font-weight: bold;
}
</style>
